<template>
  <div class="container">
    <van-swipe :autoplay="3000" indicator-color="white" @change="onChange">
      <van-swipe-item v-for="(temp, index) in bannerlist" :key="index">
        <van-image width="100vw" height="45vw" fit="cover" :src="temp.banner || defaultImg" />
        <div class="title">{{ temp.title }}</div>
      </van-swipe-item>
      <!-- 自定义指示器 -->
      <!-- <div slot="indicator" class="custom-indicator">{{ current + 1 }}/ {{ bannerlist.length }}</div> -->
    </van-swipe>

    <div class="cont-middle">
      <div class="hot">
        <div class="part1">智能匹配</div>
        <div class="more-icon" @click="routerLink(`filtrate`)">全部></div>
      </div>
      <div class="con-mate">
        <div
          v-for="(temp,index) in matchlist"
          :key="index"
          class="mate"
          @click="routerLink(`MatchInfo`, temp)"
        >
          <div class="mate-list">
            <div class="list-left">
              <van-image :src="temp.avatar" round width="71" height="71" fit="cover" />
            </div>
            <div class="list-right">
              <div class="user-name">{{ temp.nickname||'多哈哈' }}</div>
              <div>
                <span>
                  <!-- <img src="@/assets/boy-icon.png" alt class="boy-icon"> -->
                  <img :src="temp.gender | sex" alt class="boy-icon">
                </span>
                <span class="user-age">{{ temp.age||'26' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hot-act">
        <div class="hot">
          <div class="part1">热门活动</div>
          <div class="more-icon" @click="routerLink(`Activities`)">更多></div>
        </div>
        <div class="hot-list">
          <div
            v-for="(temp,index) in activelist"
            :key="index"
            class="hot-pic"
            @click="routerLink(`ActiveDetails`, temp)"
          >
            <img :src="temp.piccap||activeImg" alt class="hot-img">
            <div class="act-title">{{ temp.title||'羽毛球友谊赛活动' }}</div>
          </div>
        </div>
      </div>
      <div class="hot-act">
        <div class="hot">
          <div class="part1 part2">最新动态</div>
        </div>
        <div v-for="(temp, index) in dynamiclist" :key="index" class="container-dynamic">
          <ItemDynamic :dynamic-data="temp" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { banner, active } from '@/api/gain.js'
import { match, getDynamicList } from '@/api/dynamic.js'
// 图
import defaultImg from '@/assets/img.png'
import activeImg from '@/assets/hot-img.png'
import girl from '@/assets/girl-icon.png'
import boy from '@/assets/boy-icon.png'
// 组件
import ItemDynamic from '@/components/ItemDynamic'
export default {
  filters: {
    sex(sex) {
      const sexMap = {
        1: boy,
        2: girl,
        3: '未知'
      }
      return sexMap[sex]
    }
  },
  components: {
    ItemDynamic: ItemDynamic
  },
  data() {
    return {
      current: 0,
      bannerlist: [],
      matchlist: [],
      activelist: [],
      dynamiclist: [],
      activeImg,
      defaultImg
    }
  },
  async  created() {
    this.$store.dispatch('app/toggleMask', true)
    // 获取轮播图
    const bannerRes = await banner()
    console.log('banner', bannerRes)
    this.bannerlist = bannerRes.data
    if (this.bannerlist.length === 0) {
      for (let i = 0; i < 5; i++) {
        this.bannerlist.push({
          id: 3,
          title: '434',
          intro: '4325435342546',
          banner: 'http://placehold.it/1600x900',
          created_at: '2019-08-16 15:01:57'
        })
      }
    }
    // 获取匹配列表
    const matchRes = await match()
    console.log('match', matchRes)
    this.matchlist = matchRes.data
    // 获取活动列表
    const activeRes = await active()
    console.log('active', activeRes)
    this.activelist = activeRes.data
    // 获取动态列表
    const dynamicRes = await getDynamicList({ id: 0 })
    console.log('dynamicList', dynamicRes)
    this.dynamiclist = dynamicRes.data

    this.$store.dispatch('app/toggleMask', false)
  },
  methods: {
    routerLink(link, info) {
      console.log(info)
      this.$router.push({ name: link, params: { userInfo: info }})
    },
    onChange(index) {
      this.current = index
    }
  }
}
</script>

<style>

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.boy-icon {
  width: 15px;
  height:15px;
}
</style>
<style scoped>
.container {
  width: 95vw;
  margin: 2vw auto;
}
.title {
  /* background-color: #f4f4f4; */
  height: 40px;
  line-height: 40px;
  padding-left: 2%;
  color: #666666;
  position: relative;
  top: -5px;
}
.cont-middle {
  margin: 2% auto;
}
.part1 {
   font-size:0.875rem ;
  color: black;
  font-weight: bold;
}
.con-mate {
  padding: 3% 0;
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 2%;
}
.mate {
  width: 60%;
  white-space: nowrap;
  display: inline-block;
}
.mate-list {
  padding: 8px 6px;
  border-radius: 10px;
  background-color: #f2f2f2;
  display: flex;
  color: #3d3b3b;
  justify-content: space-around;
  margin-right: 5%;
}
.tx {
  width: 71px;
  height: 71px;
  overflow: hidden;
  border-radius: 50%;
}
.list-left {
  /* margin-left: 10px; */
}
.list-right {
  width: 200px;
  margin-left: 15px;
  overflow: hidden;
  padding-top: 10px;
}
.user-name,
.user-age {
  font-size: 1.0625rem ;
  padding-left: 2%;
  padding-bottom: 5px;
}
.user-name{
  font-weight: bold;
}
.hot-list {
  display: flex;
  justify-content: space-between;
}
.hot {
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 3%;
  margin-top: 3%;
}
.more-icon {
  font-size: 0.8rem;
}
.hot-img {
  width: 170px;
  height: 93px;
  overflow: hidden;
}
.act-title {
  color: #666;
  font-weight: bold;
  font-size:0.875rem;
}
.part2{
  margin-top: 3%;
}
</style>
